<!DOCTYPE html>
<html>
<head>
    <title>文件分享</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
            background-color: #f7f7f7;
        }
        .card {
            background: white;
            border-radius: 10px;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
            width: 300px;
            padding: 20px;
            text-align: center;
        }
        .button {
            display: block;
            width: 100%;
            padding: 10px;
            margin: 10px 0;
            border: none;
            border-radius: 5px;
            font-size: 16px;
            cursor: pointer;
        }
        .send-button {
            background-color: #00bfff;
            color: white;
        }
        .pickup-button {
            background-color: #4caf50;
            color: white;
        }
        .hidden {
            display: none;
        }
    </style>
</head>
<body>
    <div class="card">
        <button class="button send-button" onclick="showSendPage()">发件</button>
        <button class="button pickup-button" onclick="showPickupPage()">收件</button>
    </div>

    <div id="send-page" class="hidden">
        <select id="type-selector" onchange="toggleForm()">
            <option value="">选择类型</option>
            <option value="text">文本</option>
            <option value="file">文件</option>
        </select>
        <form id="text-form" class="hidden">
            <textarea id="text-content" placeholder="输入文本"></textarea>
            <button type="button" onclick="sendText()">发送文本</button>
        </form>
        <form id="file-form" class="hidden" enctype="multipart/form-data">
            <input type="file" id="file-input">
            <button type="button" onclick="sendFile()">发送文件</button>
        </form>
        <button onclick="showMainMenu()">返回主菜单</button>
    </div>

    <div id="pickup-page" class="hidden">
        <input type="text" id="pickup-code" placeholder="输入取件码">
        <button type="button" onclick="pickupItem()">取件</button>
        <div id="pickup-result"></div>
        <button onclick="showMainMenu()">返回主菜单</button>
    </div>

    <div id="result" class="hidden"></div>

    <script>
        function showMainMenu() {
            document.querySelector('.card').classList.remove('hidden');
            document.getElementById('send-page').classList.add('hidden');
            document.getElementById('pickup-page').classList.add('hidden');
            document.getElementById('result').classList.add('hidden');
        }

        function showSendPage() {
            document.querySelector('.card').classList.add('hidden');
            document.getElementById('send-page').classList.remove('hidden');
        }

        function showPickupPage() {
            document.querySelector('.card').classList.add('hidden');
            document.getElementById('pickup-page').classList.remove('hidden');
        }

        function toggleForm() {
            const type = document.getElementById('type-selector').value;
            document.getElementById('text-form').classList.toggle('hidden', type !== 'text');
            document.getElementById('file-form').classList.toggle('hidden', type !== 'file');
        }

        async function sendText() {
            const textContent = document.getElementById('text-content').value;
            const response = await fetch('/store_text', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                },
                body: JSON.stringify({ content: textContent }),
            });
            const result = await response.json();
            document.getElementById('result').innerText = `取件码: ${result.pickup_code}`;
            document.getElementById('result').classList.remove('hidden');
        }

        async function sendFile() {
            const fileInput = document.getElementById('file-input');
            const file = fileInput.files[0];
            const formData = new FormData();
            formData.append('file', file);
            const response = await fetch('/store_file', {
                method: 'POST',
                body: formData,
            });
            const result = await response.json();
            document.getElementById('result').innerText = `取件码: ${result.pickup_code}`;
            document.getElementById('result').classList.remove('hidden');
        }

        async function pickupItem() {
            const pickupCode = document.getElementById('pickup-code').value;
            const response = await fetch(`/pickup/${pickupCode}`);
            if (response.ok) {
                const result = await response.json();
                if (result.type === 'text') {
                    document.getElementById('pickup-result').innerText = `文本内容: ${result.content}`;
                } else if (result.type === 'file') {
                    const link = document.createElement('a');
                    link.href = result.url;
                    link.download = result.filename;
                    document.body.appendChild(link);
                    link.click();
                    document.body.removeChild(link);
                }
            } else {
                document.getElementById('pickup-result').innerText = '取件码无效或已过期';
            }
            document.getElementById('pickup-result').classList.remove('hidden');
        }
    </script>
</body>
</html>
